<template>
    <div style="background-color: white;margin: 30px;padding: 30px;">
    <el-form
      ref="ruleFormRef"
      style="max-width: 1300px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="主诉" prop="readme" >
        <el-input v-model="ruleForm.readme" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="现病史" prop="present">
        <el-input v-model="ruleForm.present" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="现疾病治疗情况" prop="presentTreat">
        <el-input v-model="ruleForm.presentTreat" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="既往史" prop="history">
        <el-input v-model="ruleForm.history" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="过敏史" prop="allergy">
        <el-input v-model="ruleForm.allergy" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="体格检查" prop="physique">
        <el-input v-model="ruleForm.physique" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="西医诊断" >
        <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    size="mini"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="ICD编码" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="" label="名称" width="120" />
    <el-table-column property=" " label="发病时间" />
    
    <el-table-column label="操作" width="300">
  <template #header >
    <router-link to="checkRequest">
        <el-button  type="primary" plain stype="margin:10px" > 增加 </el-button>
    </router-link>
   
        <el-button type="danger"  plain stype="margin:10px" >删除</el-button> 
   
     <el-button type="success"  plain stype="margin:10px" >刷新</el-button>
  </template>
  
 
</el-table-column>


  </el-table>
</el-form-item>     
      <el-form-item label="检查建议" prop="proposal">
        <el-input v-model="ruleForm.proposal" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="注意事项" prop="careful">
        <el-input v-model="ruleForm.careful" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 300px;width: 100px;"  type="primary" :plain="true" @click="storageForm()">保存</el-button>
        <el-button style="margin-left: 100px;width: 100px;"  type="primary"   @click="submit(ruleFormRef)">提交</el-button>
        <el-button  style="margin-left: 100px;width: 100px;"   @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    
    </el-form>
 
</div>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
  import type { TableInstance } from 'element-plus'
  import { h } from 'vue'
  import { ElMessage, ElNotification } from 'element-plus' 
  import axiosInstance from '@/utils/axiosUtils';
  interface RuleForm {
    registerId: number,
    name: string,
    readme: string,
    present: string,
    presentTreat: string,
    history: string,
    allergy: string,
    physique: string,
    proposal: string,
    careful: string,
    cure:string
  }
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const getSessionStorageData = (key, defaultValue) => {
const data = JSON.parse(sessionStorage.getItem(key));
return data !== null ? data : defaultValue;
};
const regiserId=JSON.parse(sessionStorage.getItem('Patient')).id;
const formData = JSON.parse(sessionStorage.getItem('Form') || '{}');
const ruleForm = reactive<RuleForm>({
  registerId: regiserId,
  name: formData.name || '',
  readme: formData.readme || '',
  present: formData.present || '',
  presentTreat: formData.presentTreat || '',
  history: formData.history || '',
  allergy: formData.allergy || '',
  physique: formData.physique || '',
  proposal: formData.proposal || '',
  careful: formData.careful || '',
  cure: formData.cure || ''
});
  const rules = reactive<FormRules<RuleForm>>({
    name: [
      { required: true, message: 'Please input Activity name', trigger: 'blur' },
      { min: 1, max: 200, message: '最少输入一个字符最多200个字符', trigger: 'blur' },
    ],
    readme: [
      { required: true, message: 'Please input readme', trigger: 'blur' },
      { min: 1, max: 200, message: '最少输入一个字符最多200个字符', trigger: 'blur' },
    ],
    present: [
      { required: true, message: 'Please input present', trigger: 'blur' },
      { min: 1, max: 200, message: '最少输入一个字符最多200个字符', trigger: 'blur' },
    ],
    presentTreat: [
      { required: true, message: 'Please input presentTreat', trigger: 'blur' },
      { min: 1, max: 200, message: '最少输入一个字符最多200个字符', trigger: 'blur' },
    ],
    history: [
      { required: true, message: 'Please input history', trigger: 'blur' },
      { min: 1, max: 200, message: '最少输入一个字符最多200个字符', trigger: 'blur' },
    ],
    allergy: [
      { required: true, message: 'Please input allergy', trigger: 'blur' },
      { min: 1, max: 200, message: '最少输入一个字符最多200个字符', trigger: 'blur' },
    ],
    physique: [
      { required: true, message: 'Please input physique', trigger: 'blur' },
      { min: 1, max: 200, message: '最少输入一个字符最多200个字符', trigger: 'blur' },
    ],
    proposal: [
      { required: true, message: 'Please input proposal', trigger: 'blur' },
      { min: 1, max: 200, message: '最少输入一个字符最多200个字符', trigger: 'blur' },
    ],
    careful: [
      { required: true, message: 'Please input careful', trigger: 'blur' },
      { min: 1, max: 200, message: '最少输入一个字符最多200个字符', trigger: 'blur' },
    ]
  })
interface User {
  id: number
  date: string
  name: string
  address: string
}
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])
    const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
const selectable = (row: User) => ![1, 2].includes(row.id)
const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }
]
const storageForm=()=>{

sessionStorage.setItem('Form', JSON.stringify(ruleForm));
ElNotification.success({
    title: '提示',
    message: '病案信息已保存',
    type: 'success',
    duration: 0
})
}

console.log(regiserId);
  const submit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!');
         
        axiosInstance.post('/api/medicalRecord/insertMedicalRecord',{
        registerId:regiserId,
        readme: getSessionStorageData('Form', {}).readme || '',
        present: getSessionStorageData('Form', {}).present || '',
        presentTreat: getSessionStorageData('Form', {}).presentTreat || '',
        history: getSessionStorageData('Form', {}).history || '',
        allergy: getSessionStorageData('Form', {}).allergy || '',
        physique: getSessionStorageData('Form', {}).physique || '',
        proposal: getSessionStorageData('Form', {}).proposal || '',
        careful: getSessionStorageData('Form', {}).careful || '',
        cure: getSessionStorageData('Form', {}).cure || ''    
        }).then(res=>{  
          console.log(res.data);
       
          ElMessage({
    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
      h('span', null, '您填写的病案信息 '),
      h('i', { style: 'color: teal' }, '提交成功'),
    ]),
  })
 
        }).catch(err=>{  
          ElMessage({
    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
      h('span', null, '请求获取失败 '),
      h('i', { style: 'color: teal' }, '内容有误'),
    ]),
  })
        })

      } else {
        console.log('error submit!', fields)
        ElMessage({
    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
      h('span', null, '您填写的表单 '),
      h('i', { style: 'color: teal' }, '内容有误'),
    ]),
  })
      }
    })
  }
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    if(sessionStorage.getItem('Form')){
      sessionStorage.removeItem('Form');
    }
  }
  
 
  </script>